import React, { Component } from 'react';
import {
    observer,
} from 'mobx-react';
import { Flex, Button, Tools } from 'weaver-mobile';
import { ListViewPage, RouteLayout } from 'weaver-mobile-page';
import {
    withRouter,
    Route,
} from 'react-router-dom';
import AddBtn from "./AddBtn.js";
import Form from "./Form.js";
import { configNavigation } from "../../util/public-func";
const getLabel = Tools.getLabel;

const linkages = {
    rsid: {
        activeKey: "sharetype",
        activeValue: "1"
    },
    sbid: {
        activeKey: "sharetype",
        activeValue: "2"
    },
    did: {
        activeKey: "sharetype",
        activeValue: "3"
    },
    rid: {
        activeKey: "sharetype",
        activeValue: "4"
    },
    rolelevel: {
        activeKey: "sharetype",
        activeValue: "4"
    },
    jobtitle: {
        activeKey: "sharetype",
        activeValue: "7"
    },
    jobtitlelevel: {
        activeKey: "sharetype",
        activeValue: "7"
    },
    jobtitledepartment: {
        activeKey: "jobtitlelevel",
        activeValue: "1"
    },
    jobtitlesubcompany: {
        activeKey: "jobtitlelevel",
        activeValue: "2"
    },
    customid: {
        activeKey: "sharetype",
        activeValue: "8"
    },
    alllevel: {
        activeKey: "sharetype",
        activeValue: "2,3"
    },
    seclevel__seclevelto: {
        activeKey: "sharetype",
        activeValue: "2,3,4,8,5"
    }
}

@withRouter
@observer
export default class Share extends Component {
    componentDidMount() {
        this.props.store.getShareList();
    }

    getSwipeActionProps = () => {
        const {
            store
        } = this.props, {
            deleteShareScope
        } = store;
        return {
            right: [{
                text: getLabel(91, '删除'),
                onPress: deleteShareScope,
                style: {
                    backgroundColor: "#d9001b",
                    color: "#fff",
                    padding: "0 5px",
                },
            }, ],
        }
    };

    getTemplate = (template) => {
        const newTemp = {
            default: [{
                key: 'col0',
                render: (data) => {
                    const { sharetype, sharetypespan, idspan, seclevelspan, alllevel } = data;

                    return (
                        <Flex direction="column" align="start">
		      			<Flex.Item>
		      				<span className="list-main">
		      					{sharetypespan}
		      				</span>
		      			</Flex.Item>
		      			<Flex.Item>
		      				<span className="list-sub">
                                <span  dangerouslySetInnerHTML={{__html: idspan}}></span>
				      			{alllevel === "1" && <span>{`(${getLabel(125963, "含下级")})`}</span>}
		      				</span>
		      			</Flex.Item>
		      			{
		      				!["1","7"].includes(sharetype) && (
		      					<Flex.Item>
		      						<span className="list-sub">
					      				{seclevelspan}
		      						</span>
				      			</Flex.Item>
		      				)
		      			}
		      		</Flex>
                    )
                }
            }, ],
        }
        return newTemp;
    }

    render() {
        const {
            store
        } = this.props, {
            shareListStore,
            shareScopeAddlayout,
            openShareScopeAddLayout,
            shareForm,
            saveShareScope,
        } = store;

        return (
            <React.Fragment>
				<AddBtn name={getLabel(505546, "添加共享")} onClick={openShareScopeAddLayout }/>
				<ListViewPage.Normal
			        className="wm-demo-list-view-page"
			        store={shareListStore}
			        withSwipeAction
			        swipeActionProps={this.getSwipeActionProps()}
			        getTemplate={this.getTemplate}
			      />
			      <Route
			          key={shareScopeAddlayout.id}
			          path={shareScopeAddlayout.path}
			          render={() => (
			            <RouteLayout>
			              <div
			                key="wmPoutePageDemo"
			                className="wm-route-layout wm-demo-route-layout-page"
			              >
			              	<div className="share-scope-add">
			                	<Form form={shareForm} linkages={linkages}/>
			                	<div><Button type="primary" onClick={saveShareScope}>{ getLabel(86, "保存") }</Button></div>
			              	</div>
			              </div>
			            </RouteLayout>
			          )}
			        />
			</React.Fragment>
        );
    }
}